<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>
<body id="page-top">

	<style type="text/css">
		.card-footer {
			background: none !important;
			border-top: 0px;
		}
		.monitor-header{
			width:100%;	
			margin: 0px 0px 5px 0px;
		}
		#wrapper #content-wrapper {
			overflow-x: unset;
			width: 100%;
			padding-top: 1rem;
		}
	</style>
	
	
	<div id="wrapper">

		<div id="content-wrapper">
			<div class="container-fluid">

				<!-- Icon Cards-->
				<div class="row" >
					<div class="col-xl-3 col-sm-6 mb-3">
						<div class="card text-white bg-danger o-hidden h-100">
							<div class="card-body">
								<div class="monitor-header">
									<i class="fas fa-ambulance"></i> 总资产
								</div>
								<div class="span6" style="float:left">
									交换机 : 10 <br/>
									笔记本 : 5  <br/>
								</div>
								<div class="span6" style="float:right">
									待办事宜 : 10 <br/>
									异常 : 5 
								</div>
							</div>
						</div>
					</div>
						
					<div class="col-xl-3 col-sm-6 mb-3">
						<div class="card text-white bg-primary o-hidden h-100">
							<div class="card-body">
								<div class="monitor-header">
									<i class="fas fa-server"></i> 物理机
								</div>
								<div class="span6" style="float:left">
									统计 : 10 <br/>
									正常 : 5  <br/>
									下架 : 3 	
								</div>
								<div class="span6" style="float:right">
									异常 : 10 <br/>
									空闲 : 5 
								</div>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-sm-6 mb-3">
						<div class="card text-white bg-primary o-hidden h-100">
							<div class="card-body">
								<div class="monitor-header">
									<i class="fas fa-fw fa-leaf"></i> 虚拟机
								</div>
								<div class="span6" style="float:left">
									统计 : 10 <br/>
									正常 : 5  <br/>
									下架 : 3 	
								</div>
								<div class="span6" style="float:right">
									异常 : 10 <br/>
									空闲 : 5 
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-xl-3 col-sm-6 mb-3">
						<div class="card text-white bg-primary o-hidden h-100">
							<div class="card-body">
								<div class="monitor-header">
									<i class="fas fa-database"></i> 数据库 
								</div>
								<div class="span6" style="float:left">
									总用户 : 81 <br/>
									总空间 : 243G  <br/>
									连接数 : 54 <br/>
								</div>
								<div class="span6" style="float:right">
									异常 : 10 <br/>
									空闲 : 5 
								</div>
							</div>
						</div>
					</div>
					
				</div>
				
				<div class="row" style="margin-top: 20px">
					<div class="col-xl-12 col-sm-12 mb-12">
						<table class="table">
							<thead>
								<tr>
									<th align="center" width="50px" scope="col">序号</th>
									<th scope="col">预警项</th>
									<th align="center" width="200px" scope="col">时间</th>
									<th align="center" width="80px" scope="col">操作</th>
								</tr>
							</thead>
							<tbody id="monitor-alert">
								<tr v-for="(item , index) in items">
									<td >{{ index+1 }}</td>
									<td>{{ item.message }}</td>
									<td >{{ item.date }}</td>
									<td >查看</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<th scope="col">序号</th>
									<th scope="col">预警项</th>
									<th scope="col">时间</th>
									<th scope="col">操作</th>
								</tr>
							</tfoot>
						</table>
					</div>
					
				</div>

				<div style="margin-top: 20px">
					<div class="span6" id="dayline" style="float: right; width: 50%; height: 500px;">
						<table class="table">
							<thead>
								<tr>
									<th align="center" width="60px" scope="col">序号</th>
									<th scope="col">监控项</th>
									<th align="center" width="60px" scope="col">状态</th>
								</tr>
							</thead>
							<tbody id="headth-list">
								<tr v-for="(item, index) in items">
									<td>{{ index+1 }}</td>
									<td>{{ item.message }}</td>
									<td width="60px">{{ item.status }}</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<th scope="col">序号</th>
									<th scope="col">监控项</th>
									<th scope="col">状态</th>
								</tr>
							</tfoot>
						</table>
					</div>
					<div class="span6" id="person" style="float: right; width: 50%; height: 500px;"></div>
				</div>
			</div>
		</div>
	</div>

	<script src="http://training-static.linesno.com/echarts/echarts.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	
	<script type="text/javascript">
			var person = echarts.init(document.getElementById('person'));
			var personOption = {
				title : {
					text: '服务状态',
					subtext: '纯属虚构',
					x:'center'
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient : 'vertical',
					x : 'left',
					data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				},
				toolbox: {
					show : true,
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						magicType : {
							show: true, 
							type: ['pie', 'funnel'],
							option: {
								funnel: {
									x: '25%',
									width: '50%',
									funnelAlign: 'left',
									max: 1548
								}
							}
						},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				calculable : true,
				series : [
					{
						name:'访问来源',
						type:'pie',
						radius : '55%',
						center: ['50%', '60%'],
						data:[
							{value:335, name:'直接访问'},
							{value:310, name:'邮件营销'},
							{value:234, name:'联盟广告'},
							{value:135, name:'视频广告'},
							{value:1548, name:'搜索引擎'}
						]
					}
				]
			};
				                    
			person.setOption(personOption);
		
			//////////////////////////////////////////////////// ajax_start 数据请求 ////////////////////////////////
			var alertList = new Vue({
			  el: '#monitor-alert',
			  data: {
				items: [
				  { message: '[开发]Zookeeper监控中心', date:'2018-12-12 23:21:00' },
				  { message: '[开发]环境云桌面', date:'2018-12-12 23:21:00' },
				  { message: '[开发]分布式Redis缓存', date:'2018-12-12 23:21:00' },
				  { message: '[开发]Zookeeper监控中心', date:'2018-12-12 23:21:00' },
				  { message: '[开发]环境云桌面', date:'2018-12-12 23:21:00' },
				  { message: '[开发]分布式Redis缓存', date:'2018-12-12 23:21:00' },
				  { message: '[开发]Zookeeper监控中心', date:'2018-12-12 23:21:00' },
				  { message: '[开发]环境云桌面', date:'2018-12-12 23:21:00' },
				  { message: '[开发]分布式Redis缓存', date:'2018-12-12 23:21:00' }
				]
			  }
			}) ;
		
			var alertList = new Vue({
			  el: '#headth-list',
			  data: {
				items: [
				  { message: '[开发]Zookeeper监控中心', status:'正常' },
				  { message: '[开发]环境云桌面', status:'异常' },
				  { message: '[开发]分布式Redis缓存', status:'正常' },
				  { message: '[开发]Zookeeper监控中心', status:'正常' },
				  { message: '[开发]环境云桌面', status:'异常' },
				  { message: '[开发]分布式Redis缓存', status:'正常' },
				  { message: '[开发]Zookeeper监控中心', status:'正常' },
				  { message: '[开发]环境云桌面', status:'异常' },
				  { message: '[开发]分布式Redis缓存', status:'正常' },
				  { message: '[开发]Zookeeper监控中心', status:'正常' },
				  { message: '[开发]环境云桌面', status:'异常' },
				  { message: '[开发]分布式Redis缓存', status:'正常' }
				]
			  }
			}) ;
			
			//////////////////////////////////////////////////// ajax_start 数据请求 ////////////////////////////////
			
		</script>
</body>
</html>
